import React, { useState } from 'react';
import { connect, MdSsrModelState, Helmet } from 'umi';
import VditorPreview from '@/components/MarkdownPreview/VditorPreview';

const MdSsrPage = (props: { mdSsr: MdSsrModelState }) => {
  const { mdSsr } = props;
  const { markdown, helmet } = mdSsr;
  return (
    <div style={{ width: 1200, margin: '0 auto' }}>
      <Helmet>
        <meta charSet="utf-8" />
        <title>{helmet.title}</title>
        <meta name="keywords" content={helmet.keywords} />
        <meta name="description" content={helmet.description} />
      </Helmet>
      <VditorPreview markdown={markdown} />
    </div>
  );
};

MdSsrPage.getInitialProps = async (ctx: any) => {
  const { store } = ctx;
  await store.dispatch({
    type: 'mdSsr/query',
  });
  return {
    mdSsr: store.getState().mdSsr,
  };
};

export default connect(({ mdSsr }: { mdSsr: MdSsrModelState }) => {
  return {
    mdSsr,
  };
})(MdSsrPage);
